<template>
  <m-mescroll-uni
    ref="mescrollRef"
    :down="{ auto: false }"
    :up="upConfig"
    @init="mescrollInit"
    @up="upCallback"
    @down="downCallback"
    background="#f5f5f5"
    :fixed="false"
    height="63vh"
    style="border-radius: 20rpx; overflow: hidden"
  >
    <slot :data="list"></slot>
  </m-mescroll-uni>
</template>

<script>
import sleep from '@/utils/sleep'
export default {
  props: {
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: [],
      params: {
        pageNum: 1,
        pageSize: 20,
      },
      upConfig: {
        empty: {
          icon: require('@/static/empty.png'),
          use: true,
        },
      },
      mescrollObj: {},
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescrollObj = mescroll
    },
    async upCallback(page) {
      this.params.pageNum = page.num
      await this.fetchData()
    },
    downCallback() {
      this.mescrollObj && this.mescrollObj.resetUpScroll()
    },
    async fetchData() {
      await sleep(1000 * 1)
      const { pageNum, pageSize } = this.params
      const rows = this.options.slice(pageNum * pageSize - pageSize, pageNum * pageSize)
      this.mescrollObj.endSuccess(rows.length, rows.length === this.params.pageSize)
      this.list = this.params.pageNum === 1 ? rows : [...this.list, ...rows]
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20rpx 20rpx;
}
</style>
